<template>
  <div class="app-container">
    <!-- 搜索--------------------------------- -->
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>{{$t('common.filterSearch')}}</span>
        <el-button
          style="float: right"
          @click="searchOrderid(list.order_id)"
          type="primary"
          size="small"
        >
          {{ $t('common.search') }}
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="list" size="small" label-width="140px">
          <el-form-item :label="$t('orderlist.search.id')">
            <el-input
              style="width: 203px"
              v-model="list.order_id"
              :placeholder="$t('orderlist.search.plid')"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 数据显示 -->
    <div align="right">
      <el-button
        icon="el-icon-thumb"
        @click="fetchData()"
        type="primary"
        size="small"
      >
        {{$t('orderlist.search.fetch')}}
      </el-button>
    </div>
    <!-- //数据展示 -->
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center"  :label="$t('orderlist.table.order_id')">
        <template slot-scope="scope">
          {{ scope.row.order_id }}
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('orderlist.table.total_price')">
        <template slot-scope="scope">
          {{ scope.row.total_price }}
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('orderlist.table.is_pay')">
        <template slot-scope="scope">
          <span v-if="scope.row.is_pay == 1"
            ><el-tag size="success">{{$t('orderlist.ispay.is_pay')}}</el-tag></span
          >

          <span v-if="scope.row.is_pay == 0"
            ><el-tag type="danger">{{$t('orderlist.ispay.is_not_pay')}}</el-tag></span
          >
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('orderlist.table.is_ship')">
        <template slot-scope="scope">
          <span v-if="scope.row.is_ship == 1"
            ><el-tag size="medium">{{$t('orderlist.is_ship.is_ship')}}</el-tag></span
          >

          <span v-if="scope.row.is_ship == 0"
            ><el-tag type="warning">{{$t('orderlist.is_ship.is_not_ship')}}</el-tag></span
          >
        </template>
      </el-table-column>

      <el-table-column :label="$t('orderlist.table.create_time')" align="center">
        <template slot-scope="scope">
          <span style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block"  >
          {{ dateFormat(scope.row.create_time) }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('common.operate')"
        width="350"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="showBox()"
            >修改地址</el-button
          >
          <!-- 修改地址的对话框 -->
          <el-dialog
            title="修改地址"
            :visible.sync="addressVisible"
            width="50%"
            @close="addressDialogClosed"
          >
            <el-form
              :model="addressForm"
              :rules="addressFormRules"
              ref="addressFormRef"
              label-width="100px"
            >
              <el-form-item label="省市区/县" prop="address1">
               <el-cascader :options="citydata"
        v-model="addressForm.address1"></el-cascader>
              </el-form-item>
              <el-form-item label="详细地址" prop="address2">
                <el-input v-model="addressForm.address2"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="addressVisible = false">取 消</el-button>
              <el-button type="primary" @click="addressVisible = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>

          <el-button
            type="success"
            size="mini"
            icon=" el-icon-location"
            @click="showProgressBox()"
            >物流状态</el-button
          >
          <!-- 物流进度的对话框 -->
          <el-dialog
            title="物流进度"
            :visible.sync="progressVisible"
            width="50%"
          >
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in progressInfo"
                :key="index"
                :timestamp="activity.time"
              >
                {{ activity.context }}
              </el-timeline-item>
            </el-timeline>
            <!-- <span>{{progressInfo}}</span> -->
            <span slot="footer" class="dialog-footer">
              <el-button @click="progressVisible = false">取 消</el-button>
              <el-button type="primary" @click="progressVisible = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <!-- ----------------------------------分页 -->
    <div class="block" style="float: right; margin-top: 20px">
      <!-- <span class="demonstration">显示总数</span> -->
      <el-pagination
        background
        @current-change="fetchData"
        :current-page.sync="page_num"
        :page-size="page_size"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import order from "@/api/orderModule";
import progressTest from "@/utils/order";
import cityData from "@/utils/citydata";
export default {
  data() {
    return {
      list: [],
      page_num: 1,
      page_size: 6, //每6个数据一页
      total: 1, //初始化
      dialogaddress: false,
      progressVisible: false,
      progressInfo: "",
      progressTestInfo: progressTest,
      addressVisible: false, //控制修改地址对话框显示
      addressForm: {
        address1: [],
        address2: "",
      },
      addressFormRules: {
        address1: [
          { required: true, message: "请选择省市区/县", trigger: "blur" },
        ],
        address2: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
      },
      citydata: cityData,
    };
  },
  //调用methods定义的方法，得到数据
  created() {
    this.token = localStorage.getItem("token");
    this.fetchData();
  },
  methods: {
    //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
    dateFormat: function (time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    //页面渲染
    fetchData(page = 1) {
      this.page_num = page;
      var vm = this;
      order
        .getOrderlist(this.page_num, this.page_size)
        //请求成功调用
        .then(function (resp) {
          vm.list = resp.data.orderList.list;
          vm.total = resp.data.orderList.total;
          console.log(vm.list);
          console.log(vm.total);
        });
    },
    //订单编号查询
    searchOrderid(order_id) {
      var vm = this;
      order
        .searchOrder(order_id)
        .then(function (resp) {
          console.log(resp.data);
          if (resp.errorCode == 0) {
            vm.$message({
              message: "查找成功!",
              type: "success",
            });
            var searchList = [];
            searchList.push(resp.data.order);
            vm.list = searchList;
          } else {
            vm.$message.error("查无此编号");
          }
        })
        .catch(function (error) {
          vm.$message.error("查找失败");
          console.log(error);
        });
    },
    editDetail(order_id) {
      var vm = this;
      vm.dialogaddress = true;
    },
    //展示修改地址的对话框
    showBox() {
      this.addressVisible = true;
    },
    //关闭修改地址对话框
    addressDialogClosed() {
      this.$refs.addressFormRef.resetFields();
    },
    //展示物流进度对话框

    showProgressBox() {
      this.progressInfo = this.progressTestInfo;
      console.log("zszsjzsjMNBNBNBN");
      console.log("aaaaaaaa", this.progressInfo);
      this.progressVisible = true;
    },
    // async showProgressBox(){
    //     // const {data: res} = await this.$http.get('/100000007');
    //     if(res.meta.status!==200){
    //         return this.$message.error('获取物流进度失败！')
    //     }
    //     if(res.data==null||res.data==''
    //         ||JSON.stringify(res.data).indexOf('查无结果') !=-1){
    //         //如果接口不可用了，取个模拟数据
    //         this.progressInfo = progressTestInfo
    //     }else{
    //         //接口可用
    //         this.progressInfo = res.data;
    //     }
    //     this.progressVisible = true;
    // }
  },
};
</script>
<style scoped>
.el-cascader {
  width: 100%;
}
</style>
